<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 3000px;
        }
    </style>
</head>
<body>

    <script>

        // 事件执行频率过高，影响性能

        //  解决方案 
        //    节流： 设定一个延时器，在这一段时间内，事件只会被触发一次，过完这段事件，事件又可以重新被触发
        //            计时一旦开始，就不会被打断，一直到计时结束，才能再次触发事件
        //    防抖： 设定一个延时器，在下一次事件触发的触发的时候，清除上一个延时器，重新开始计时，启动新的延时器
        //            事件不再触发的时候，事件才最终被真正的执行


        //  防抖和节流都可以降低事件的执行频率

        // 节流

        // var flag = true ;
        // window.onscroll = function() {
        //     if(flag) {
        //         flag = false ;
        //         setTimeout(function(){
        //             console.log(1);
        //             flag = true ;
        //         } , 300)
        //     }
        // }




        // 防抖   
        var t = null ;
        window.onscroll = function() {
            if(t) clearTimeout(t) ;
            t = setTimeout(function() {
                console.log(2);
            } , 300)
        }
        

    </script>
    
</body>
</html>